<template>
  <div class="store-serve-cpt">
    <!-- top navs -->
    <section class="top-navs">
      <section v-for="(item,index) of this.topNavs" :key="index" :class="curIndex==index?'cur':''" @click="onTopNavClick(item,index)">{{item.name}}<i></i></section>
    </section>
    <!-- content -->
    <section class="content">
      <div v-if="listsData&&listsData.length>0" class="list-container">
        <van-list
          v-model="listCfg.loading"
          :finished="listCfg.finished"
          finished-text=""
          :error.sync="listCfg.error"
          error-text="请求失败，点击重新加载"
          @load="onListDataPageLoad"
        >
          <div class="list-item" v-for="(item) of listsData" :key="item.id">
            <a href="javascript:;">
              <section class="order-list-info clearfix">
                <span class="fl left">
                  <img src="https://img.wifenxiao.com/h5-wfx/images/user/store/icon-order.png"><p>{{item.order_no}}</p>
                </span>
                <span
                  v-if="item.status==3"
                  class="status fr completed"
                ></span>
                <!-- <span
                  v-else-if="item.status==4"
                  class="status fr orderClose"
                ></span> -->
                <span v-else class="status fr red">{{statusFormat(item.status)}}</span>
              </section>
            </a>
            <section class="order-goods">
              <ul>
                <li
                  v-for="(goods,index) in item.order_item"
                  :key="index"
                  class="goods-li"
                >
                  <section class="order-goods-img">
                    <a @click="jumpTo(goods.item_id)">
                      <img :src="goods.pic_url+'160x160'" width="80" height="80" v-if="goods.is_compress"/>
                      <img :src="goods.pic_url" width="80" height="80" v-else/>
                    </a>
                  </section>
                  <section class="order-goods-infor g-flex">
                    <div class="left">
                      <a class="goods-title"  @click="jumpTo(goods.item_id)">{{goods.title || goods.item_title}}</a>
                      <p class="goods-props" v-if="goods.props">{{goods.props}}</p>
                      <span class="price" v-html="scaleGoodsPriceFn(goods.current_price)"></span>
                    </div>
                    <div class="right">
                      <span class="num fr"><i>x</i>{{goods.num}}</span>
                    </div>
                  </section>
                </li>
              </ul>
            </section>

            <section v-if="curMode==0" class="order-info">
              <div><span class="icon"></span><span>门店名称：{{item.shop_name}}</span></div>
              <div><span class="icon"></span><span>门店地址：{{item.address}}</span></div>
            </section>
            <section v-else class="order-info">
              <div><span class="icon store-icon"></span><span>会员名：{{item.nickname}}</span></div>
              <div><span class="icon store-icon"></span><span @click="wxPhoneCall(item.mobile)">手机号：{{item.mobile}}</span></div>
            </section>
            <section class="order-pay">
              <div class="good-more-btn" :style="{'padding-top':item.status==3||item.order_status!=3?0:''}">
                <van-button v-if="item.order_status==3&&(curMode?item.status==2||item.status==3:item.status==1||item.status==3)" round hairline class="btn gray-btn">已确认</van-button>
                <van-button v-else-if="item.confirm_button==1" round hairline class="btn white-btn" @click="onClickConfirm(item)">确认服务</van-button>
              </div>
            </section>
          </div>
        </van-list>
      </div>
      <div v-else>
        <no-data :noData=noData></no-data>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { List } from 'vant'
Vue.use(List)
import noData from '@/components/noData/index'
import { scaleGoodsPrice } from '@/utils/index.js'
import { reqPostServiceOrderList, reqPostServiceConfirm } from '@/api/user/member/memberApi'
import { reqPostStoreServiceOrderList } from '@/api/user/store/storeApi'

export default Vue.extend({
  name: 'store-serve-cpt',
  props: {
    topNavs: {
      type: Array,
      default: () => {
        return [
          {
            id: '1',
            name: '全部'
          },
          {
            id: '2',
            name: '未服务'
          },
          {
            id: '3',
            name: '已服务'
          }
        ]
      }
    },
    curMode: {
      type: Number,
      default: 0
    }
    // curIndex: {
    //   type: Number,
    //   default: 0
    // }
    // listsData: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   }
    // }
  },
  components: {
    noData
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无订单',
        marginTop: '60px',
        width: '214px',
        txtMarginTop: '-46px'
        // txtColor: '#999'
      },
      listCfg: {
        finished: false,
        loading: false,
        error: false,
        pageSize: 10,
        page: 2
      },
      listsData: [],
      curIndex: 0,
      curType: -1
    }
  },
  mounted() {
    this.curMode ? this.fetchStoreService() : this.fetchService()
  },
  methods: {
    // TODO 小程序跳转
    jumpTo(itemId) {
      window.open('/item-detail?detailId=' + itemId)
    },
    onTopNavClick(v, index) {
      this.curIndex = index
      switch (this.curIndex) {
        case 0:
          this.curType = -1
          break
        case 1:
          this.curType = 1
          break
        case 2:
          this.curType = 2
          break
      }
      this.curMode ? this.fetchStoreService() : this.fetchService()
    },
    onListDataPageLoad() {
      this.curMode ? this.partFetchStoreService() : this.partFetchService()
    },
    partFetchService() {
      reqPostServiceOrderList({
        'type': this.curType,
        'p': this.listCfg.page
      }).then(res => {
        this.listCfg.loading = false
        const data = res.data
        if (res.status == 1) {
          this.listsData = this.listsData.concat(data)
          if (data && data.length >= 10) {
            this.listCfg.page++
          } else {
            this.listCfg.finished = true
          }
        } else {
          this.listCfg.error = true
        }
      }).catch(_ => {
        this.listCfg.error = true
      })
    },
    partFetchStoreService() {
      reqPostStoreServiceOrderList({
        'type': this.curType,
        'p': this.listCfg.page
      }).then(res => {
        this.listCfg.loading = false
        const data = res.data
        if (res.status == 1) {
          this.listsData = this.listsData.concat(data)
          if (data && data.length >= 10) {
            this.listCfg.page++
          } else {
            this.listCfg.finished = true
          }
        } else {
          this.listCfg.error = true
        }
      }).catch(_ => {
        this.listCfg.error = true
      })
    },
    fetchService() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      reqPostServiceOrderList({
        'type': this.curType,
        'p': 1
      }).then(res => {
        if (res.status == 1) {
          this.listsData = res.data
        }

        this.$loadingWrap.close()
      }).catch(_ => {
        this.$loadingWrap.close()
      })
    },
    fetchStoreService() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      reqPostStoreServiceOrderList({
        'type': this.curType,
        'p': 1
      }).then(res => {
        if (res.status == 1) {
          this.listsData = res.data
        }

        this.$loadingWrap.close()
      }).catch(_ => {
        this.$loadingWrap.close()
      })
    },
    Jump(url, data) {
      url.includes('/') ? this.$JumpPath(this, url, data) : this.$JumpName(this, url, data)
    },
    JumpUrl(url) {
      window.location.href = url
    },
    // TODO 微分销与小程序差别：拨打电话
    wxPhoneCall(phone) {
      wx.makePhoneCall({
        phoneNumber: phone
      });
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    statusFormat(status) {
      let des = ''
      switch (status) {
        case '0':
          des = '未确认'
          break
        case '1':
          des = '未服务'
          break
        case '2':
          des = '未服务'
          break
        case '3':
          des = '已核销'
          break
        default:
          break
      }
      return des
    },
    onClickConfirm(item) {
      // order_id，type：1会员核销，2门店核销
      reqPostServiceConfirm({
        'order_id': item.order_id,
        'type': this.curMode ? 2 : 1
      }).then(res => {
        if (res.status) {
          this.curMode ? this.fetchStoreService() : this.fetchService()
        } else {
          this.$Error(res.msg)
        }
      }).catch(_ => {})
    }
  },
  mounted() {
    // this.onListDataPageLoad()
    this.curMode ? this.fetchStoreService() : this.fetchService()
  }
})
</script>

<style lang="scss">
@import "~@/styles/mixin";

.store-serve-cpt {
  .top-navs {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 750px;
    margin: 0 auto;
    z-index: 3;
    width: 100%;
    border-radius: 0px 0px 20px 20px;
    background: #fff;
    section {
      position: relative;
      flex: auto;
      height: 100px;
      line-height: 90px;
      font-size: 26px;
      text-align: center;
      &.cur {
        font-size: 28px;
        font-weight: bold;
        i{
          position: absolute;
          left: 50%;
          margin-left: -28px;
          bottom: 24px;
          width: 56px;
          height: 4px;
          font-size: 0;
          overflow: hidden;
          @include gradient(right,rgba(242,11,34,1),rgba(242,11,34,0.1));
          // background-color: #ff6e42;
        }
      }
    }
  }
  .content {
    padding-top: 100px;
  }
  .list-container {
    padding:20px 24px;
    .list-item {
      overflow: hidden;
      position: relative;
      margin-bottom: 20px;
      padding: 0 24px;
      border-radius: 20px;
      background: #fff;

      .order-list-info {
        position: relative;
        padding: 20px 7px 20px 0;
        border-bottom: 1px solid #EDEDED;
        background: #fff;
        // height: 120px;
        line-height: 34px;
        font-size: 24px;
        .icon_linkto {
          color: #9c9c9c;
        }
        .left {
          line-height: 72px;
          // .left-icon {

          // }
          img {
            position: absolute;
            top: 32px;
            width: 24px;
            height: 34px;
          }
          p {
            padding-left: 45px;
          }
        }
      }

      .status {
        display: block;
        height: 72px;
        line-height: 72px;
        font-size: 26px;
        color: #F30C23;
        text-align: right;

        &.red {
          color: #f00;
        }

        &.completed {
          position:absolute;
          right:0;
          top:0;
          width: 100px;
          height:80px;
          background: url("https://img.wifenxiao.com/h5-wfx/images/order/order_completed.png") no-repeat;
          background-size: 100%;
        }

        &.orderClose {
          position:absolute;
          right:0;
          top:0;
          width: 100px;
          height:80px;
          background: url("https://img.wifenxiao.com/h5-wfx/images/order/order_close.png") no-repeat;
          background-size: 100%;
        }
      }

      .order-goods {
        .goods-li {
          display: flex;
          flex: 1;
          padding: 30px 0;
          border-bottom: 1px solid #f0f0f0;
          &:last-child {
            padding-bottom:20px;
            border-bottom: 0;
          }
        }
        .order-goods-img {
          overflow: hidden;
          position: relative;
          width: 160px;
          height: 160px;
          border-radius: 10px;

          a {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;

            img {
              width: 100%;
            }

            .activity-shade {
              position: absolute;
              left:0;
              bottom: 0;
              display: inline-block;
              padding: 0 4px;
              width: 100%;
              height: 40px;
              line-height: 40px;
              background: rgba(255, 68, 69, 0.8);
              color: #fff;
              text-align: center;
            }
          }
        }
        .order-goods-infor {
          display:flex;
          flex: 1;
          position: relative;
          height: 160px;
          margin-left: 16px;
          .left{
            position:relative;
            flex:1;
          }
          .right{
            width:70px;
            margin-top:60px;
          }
        }
        .goods-title {
          @include lineClamp(24px, 1.4, 2);
        }
        .goods-props {
          // overflow: hidden;
          // text-overflow:ellipsis;
          // white-space: nowrap;
          @include lineClamp(24px, 1.4, 1);
          height: 36px;
          line-height: 36px;
          margin-top: 8px;
          color: #666;
        }
        .price {
          position:absolute;
          bottom:0;
          left:0;
          em {
            font-size: 32px;
          }
        }
        .num {
          color: #333;
        }
      }

      .order-info {
        color: #666;
        font-size: 24px;
        padding-left: 180px;
        > div:first-child {
          line-height: 26px;
          height: 26px;
          span.icon::before {
            content: '';
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/store/icon-shop.png');
            background-size: 100%;
            width: 24px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 2px;
          }
          span.store-icon::before {
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/store/icon-user.png');
            top: 4px;
          }
        }
        > div:last-child {
          margin-top: 23px;
          line-height: 28px;
          height: 28px;
          span.icon::before {
            content: '';
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/store/icon-location.png');
            background-size: 100%;
            width: 24px;
            height: 28px;
            display: inline-block;
            position: relative;
            top: 2px;
          }
          span.store-icon::before {
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/store/icon-phone.png');
            height: 30px;
            top: 4px;
          }
        }
        span.icon {
          margin-right: 13px;
        }
      }
      // .customer-info{
      //   line-height: 60px;
      //   font-size: 24px;
      //   .customer-name{
      //     margin-bottom: thin solid #ddd;
      //   }
      // }
      .order-pay {
        text-align: right;
        line-height: 68px;
        // border-top: 2px solid #f0f0f0;
        .payment-box {
          padding: 0 20px;
          // border-bottom: 1px solid #f0f0f0;
        }
        .final-payment-time {
          color: #999;
        }
        .good-price-box {
          height: 60px;
          line-height: 60px;
          // padding: 0 20px;
          // border-bottom: 1px solid #f0f0f0;
          font-size: 24px;
          .good-total-price {
            i {
              font-size: 20px;
            }
          }
          .good-discount-price {
            color: #F30C23;
            /* em {
              font-size: 28px;
            } */
          }
        }

        .good-more-btn {
          padding: 34px 0 30px;
          text-align: right;

          .btn {
            display: inline-block;
            height: 56px;
            // line-height: 54px;
            // border-radius: 50px;
            margin-left:6px;
            padding: 0 30px;
            font-size: 26px;
            color: #333;
            border-color:#999;
            background: #fff;
            &:first-child{
              margin-left:0;
            }

            &.gray-btn {
              border-color:#B3B3B3;
              color: #B3B3B3;
            }

            &.white-btn {
              border-color:#F20B22;
              color: #F20B22;
              /* border-color:#F20B22;
              color: #fff;
              background: #F20B22; */
            }
          }
        }
      }
    }
  }
}
</style>